﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script>        var d = new Date()</script>
    <script src="../../../fly/fly.js" type="text/javascript"></script>
    <script src="../../fly.ui.js" type="text/javascript"></script>
    <script src="../../plugins/grid/grid.js" type="text/javascript"></script>
    <script src="../../plugins/pager/pager.js" type="text/javascript"></script>
    <script type="text/javascript">

        // alert(new Date() - d)
    </script>
    <link href="../../plugins/themes/blue/fly-base.css" rel="stylesheet" type="text/css" />
    <link href="../../plugins/themes/blue/button.css" rel="stylesheet" type="text/css" />
    <link href="../../plugins/themes/gray/grid.css" rel="stylesheet" type="text/css" />
    <link href="../../plugins/themes/blue/toolbar.css" rel="stylesheet" type="text/css" />
    <link href="../../plugins/themes/blue/pager.css" rel="stylesheet" type="text/css" />
    <script>

        $(function () {
            //generate json data
            var rows = []
            while (rows.length < 200) {
                rows.push({
                    id: rows.length,
                    f1: Math.random().toString(16).replace(/\d/g, ''),
                    f2: Math.random(),
                    f3: Math.random(),
                    f4: Math.random() + " - " + Math.random(),
                    f5: Math.random()
                })
            }

            rows[0].children = [rows.pop(), rows.pop(), rows.pop(), rows.pop(), rows.pop()]

            rows[3].children = [rows.pop(), rows.pop()]

            rows[3].children[1].children = [rows.pop(), rows.pop(), rows.pop()]

            //create store
            var store = new $.data.Store(rows)

            var pager = new $.ui.Pager({
                //css: "f-pager-pageList-button-rect",
                currentType: $.ui.Pager.currentTypes.pageList,
                showNext: false,
                showPrevious: false,
                showButtonText: true
                //, showInfo: false
            });

            //create grid
            var panel = new $.ui.grid.GridPanel({
                id: 'panel',
                store: store,
                width: 800,
                height: 400,
                rowHeight: 50,
                plugins: [new $.ui.grid.plugins.TreeGrid({
                    sm: {
                        parentCascade: true,
                        childCascade: true
                    }
                }),
                new $.ui.grid.plugins.Editing({ begin: 'dblclick' })],
                columns: [
                    new $.ui.grid.RowNumberer({
                        format: "{0}.",
                        width: 150
                    }),
                    new $.ui.grid.CheckboxSelectionModel({ dragClearSelection: true }),
                    {
                        dataIndex: "id",
                        width: 40,
                        css: 'blue',        //Merits CSS control column style
                        headerCss: 'red',
                        headerStyle: "font-size:20px"
                    },
                    {
                        dataIndex: "f1",
                        editor: new $.ui.grid.plugins.Editing.RadioEditor({
                            items: [[1, 'boy'], [2, 'gril']]
                        }),
                        style: "color:red"  //Merits inline style control column style
                    }, {
                        dataIndex: "f2",
                        editor: new $.ui.grid.plugins.Editing.CheckEditor({
                            items: { 1: 'man', 2: 'woman' }
                        })
                    }, {
                        dataIndex: "f3",
                        editor: new $.ui.grid.plugins.Editing.SelectEditor({
                            items: 'Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday'.split(',')
                        })
                    }, {
                        dataIndex: "f4",
                        editor: new $.ui.grid.plugins.Editing.ListEditor({
                            items: 'Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday'.split(',')
                        })
                    }, "f5"
                ]
                , bbar: pager
            })

            panel.render(document.body)


            document.onclick = function () {
                //debugger
                //                var s = new Date()

                //                var i = 0;
                //                //                while (i++ < 100) {
                //                //                    var d = $("div").parent(function (p) {
                //                //                        return p.nodeName=="TD"
                //                //                    })
                //                //                }
                //                //                while (i++ < 100) {
                //                //                    var d = $("div").filter("['cl-ass'>='a']",function (p) {
                //                //                        return p.children.length>2 
                //                //                    })
                //                //                }

                //                while (i++ < 1000) {
                //                    //var d = fly.ui.grid.Row.getOwnerRowId($(".f-node-cbox:first")[0])
                //                    var d=$(".f-node-cbox").select(function () {
                //                        return fly.ui.grid.Row.getOwnerRowId(this)
                //                    });
                //                }
                //                alert(new Date() - s)
                //                alert(d)
            }
        })
    </script>
    <style>
        body
        {
            height: 1000px;
            font-size: 12px;
            font-family: Lucida Grande, Lucida Sans, Arial, sans-serif;
        }
        
        .blue
        {
            color: blue;
        }
        
        .red
        {
            color: Red;
        }
    </style>
</head>
<body>
    <br /><div style="font-size:18pt">双击行开始编辑</div>
    
</body>
</html>
